<HTML>
<HEAD>
	<TITLE>FusionCharts Free & JavaScript - Updating chart using updateChartXML() Method</TITLE>	
	<style type="text/css">
	<!--
	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
	}
	-->
	</style>
	<SCRIPT LANGUAGE="Javascript" SRC="/FusionCharts/FusionCharts.js"></SCRIPT>
	<SCRIPT LANGUAGE="JavaScript">
		/*
		 * updateChart method is called, when user clicks the button
		 * Here, we generate the XML data again and build the chart.		  
		 *	@param	domId	domId of the Chart
		*/
		function updateChart(domId){
			//using updateChartXML method defined in FusionCharts.js
			updateChartXML(domId,"<graph><set name='A' value='32' /></graph>");
			//Disable the button
			this.document.frmUpdate.btnUpdate.disabled = true;
		}
	</SCRIPT>
</HEAD>
<BODY>
	<CENTER>
		
		<div id="chart1div">
			FusionCharts
		</div>
		<script language="JavaScript">					
			var chart1 = new FusionCharts("/FusionCharts/FCF_Line.swf", "chart1Id", "800", "600", "0", "1");		   			
			chart1.setDataXML("<graph caption='Bascal Body Temp' subcaption='Peter' xAxisName='per Day' yAxisMinValue='35.80' yAxisMaxValue='37.20' yAxisName='Temp' decimalPrecision='2' formatNumberScale='2' numberPrefix='C' numdivlines='10' numVDivLines='10' showAlternateVGridColor='1' chartLeftMargin='10' chartRightMargin='10' showNames='1' showValues='0' showAlternateHGridColor='1' AlternateHGridColor='ff5904' divLineColor='ff5904' divLineAlpha='20' alternateHGridAlpha='5'>{% for dayTemp in dayTemps %}<set name='{{dayTemp.day.date }}' value='{{dayTemp.temp}}' hoverText='{{dayTemp.day}}'/>{% endfor %}</graph>");
			chart1.render("chart1div");
		</script>
		<BR />
		
		<form name='frmUpdate'>
		<input type='button' value='Change Data' onClick="javaScript:updateChart('chart1Id');" name='btnUpdate' />		
		</form>
		
		<a href="/static/recordTemp.html">Record My Temp Now</a>
	</CENTER>
</BODY>
</HTML>
